<template>
	<view class="return-page">
		<c-layout>
			<c-navigation-bar slot="head" title="Return"></c-navigation-bar>
			<view class="tabs">
				<view class="tabs_aside" :class="active === 0 ? 'active' : ''" @click="active = 0">Unhandled</view>
				<view class="tabs_aside" :class="active === 1 ? 'active' : ''" @click="active = 1">Processed</view>
			</view>

			<!-- 列表 -->
			<view class="container">
				<view class="productBox" v-for="(item, index) in shelfList" :key="item.id">
					<view class="productBox_top">
						<u-image :src="item.image" style="height: 160rpx; width: 160rpx"></u-image>
						<view class="productBox-child" style="margin-left: 12rpx">
							<view class="check-box">
								<view class="">
									{{ item.name }}
								</view>
								<u-checkbox @change="checkChange(index)" :value="item.ck" shape="circle" :name="item.name">
									<!-- {{item.name}} -->
								</u-checkbox>
							</view>

							<view class="" style="color: #91909a; font-size: 24Frpx; margin: 12rpx 0 18rpx 0">{{ item.color }}</view>
							<view class="">
								<view class="" style="color: #91909a; font-size: 24rpx">${{ item.specifications }}</view>
								<view class="">
									X{{item.count}}
								</view>
							</view>
							
						</view>
					</view>
					<view class="productBox_bottom">
						<view class="statistics">
							<view class="">
								Total quantity
								<text style="color: #000; margin-left: 10rpx">{{ item.totalQuantity }}</text>
							</view>
							<view class="statistics_two">
								Total amount
								<text style="color: #000; margin-left: 10rpx">${{ item.totalAmount }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0,
			shelfList: [
				{
					name: 'Roller Rabbit',
					url: '',
					ck: false,
					color: 'Vado Odelle Dress',
					specifications: 198,
					count:1,
					totalQuantity: '1009',
					totalAmount: '35,99'
				},
				{
					name: 'Axel Arigato',
					url: '',
					ck: false,
					color: 'Vado Odelle Dress',
					specifications: '198',
					count:1,
					totalQuantity: '1009',
					totalAmount: '35,99'
				},
				{
					name: 'Herschel Supply Co',
					url: '',
					ck: false,
					color: 'Vado Odelle Dress',
					specifications: '198',
					count:1,
					totalQuantity: '1009',
					totalAmount: '35,99'
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.return-page {
	height: 100vh;
	padding: 0 44rpx;
	.tabs {
		height: 68rpx;
		background: rgba(0, 0, 0, 0.0287);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		width: 539rpx;
		display: flex;
		align-items: center;
		margin: 58rpx auto;
		padding: 0 8rpx;

		.tabs_aside {
			width: 50%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
			font-weight: 400;
			color: #a5a5a5;
			transition: transform 0.4s;
		}

		.active {
			background: #ffffff;
			box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			height: 56rpx;
			line-height: 56rpx;
			color: #3b2be4;
		}
	}

	.container {
		height: 80vh;
		overflow: auto;
		background: #ffffff;

		.productBox {
			height: 348rpx;
			background: #ffffff;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #e1e8e8;
			margin: 30rpx;
			padding: 20rpx;

			.productBox_top {
				display: flex;
				padding-bottom: 10px;
				border-bottom: 1px solid #f2f3f5;
				align-items: center;
				.productBox-child {
					width: 100%;
					.check-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.productBox_bottom {
				margin-top: 8px;
				display: flex;
				flex-wrap: wrap;
				/* flex: 1; */
				height: 53px;
				align-content: space-between;

				.statistics {
					display: flex;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #91909a;

					.statistics_two {
						margin-left: 58rpx;
					}
				}
			}
		}
	}
}
</style>
